<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">新建</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100">
          <el-button
            class="btn-success width100"
            type="primary"
            @click="submitForm()"
          >提交</el-button>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px" class="mt30">
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品名称:" prop="name">
              <el-input v-model="form.name" placeholder="请输入产品名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品内容:" prop="content">
              <vue-ueditor-wrap v-model="form.content" :config="myConfig"></vue-ueditor-wrap>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { proSampleAdd } from "@/api/system/proSample/proSample"
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  name: "add",
  components: { VueUeditorWrap },
  data(){
    return {
      form: {
        name: '',
        content: ''
      },
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口
        serverUrl: '',
        // UEditor 是文件的存放路径，
        UEDITOR_HOME_URL: '/UEditor/',
        toolbars: [
          [
            'source', //源代码
            // 'anchor', //锚点
            'undo', //撤销
            'redo', //重做
            'bold', //加粗
            'indent', //首行缩进
            // 'snapscreen', //截图
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            'fontborder', //字符边框
            'superscript', //上标
            // 'formatmatch', //格式刷
            // 'blockquote', //引用
            // 'pasteplain', //纯文本粘贴模式
            'selectall', //全选
            // 'print', //打印
            // 'preview', //预览
            'horizontal', //分隔线
            'removeformat', //清除格式
            // 'time', //时间
            // 'date', //日期
            // 'unlink', //取消链接
            // 'insertrow', //前插入行
            // 'insertcol', //前插入列
            // 'mergeright', //右合并单元格
            // 'mergedown', //下合并单元格
            // 'deleterow', //删除行
            // 'deletecol', //删除列
            // 'splittorows', //拆分成行
            // 'splittocols', //拆分成列
            // 'splittocells', //完全拆分单元格
            // 'deletecaption', //删除表格标题
            // 'inserttitle', //插入标题
            // 'mergecells', //合并多个单元格
            // 'deletetable', //删除表格
            // 'cleardoc', //清空文档
            // 'insertparagraphbeforetable', //"表格前插入行"
            // 'insertcode', //代码语言
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            // 'simpleupload', //单图上传
            // 'insertimage', //多图上传
            // 'edittable', //表格属性
            // 'edittd', //单元格属性
            // 'link', //超链接
            // 'emotion', //表情
            // 'spechars', //特殊字符
            // 'searchreplace', //查询替换
            // 'map', //Baidu地图
            // 'gmap', //Google地图
            // 'insertvideo', //视频
            // 'help', //帮助
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对齐
            'justifyjustify', //两端对齐
            'forecolor', //字体颜色
            'backcolor', //背景色
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            // 'fullscreen', //全屏
            'directionalityltr', //从左向右输入
            'directionalityrtl', //从右向左输入
            'rowspacingtop', //段前距
            'rowspacingbottom', //段后距
            // 'pagebreak', //分页
            // 'insertframe', //插入Iframe
            // 'imagenone', //默认
            // 'imageleft', //左浮动
            // 'imageright', //右浮动
            // 'attachment', //附件
            // 'imagecenter', //居中
            // 'wordimage', //图片转存
            'lineheight', //行间距
            'edittip ', //编辑提示
            'customstyle', //自定义标题
            // 'autotypeset', //自动排版
            // 'webapp', //百度应用
            'touppercase', //字母大写
            'tolowercase', //字母小写
            // 'background', //背景
            // 'template', //模板
            // 'scrawl', //涂鸦
            // 'music', //音乐
            // 'inserttable', //插入表格
            // 'drafts', // 从草稿箱加载
            // 'charts', // 图表
          ]
        ]
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "产品名称不能为空", trigger: "blur"}
        ],
      }
    }
  },
  methods: {
    // 提交数据
    submitForm() {
      // console.log(this.form)
      this.$refs["form"].validate(valid => {
        if (valid) {
          proSampleAdd(this.form).then(res=> {
            if(res.code == 200){
              this.$refs.form.resetFields()
              this.$tab.closeOpenPage({ path: "/proSample/list" })
              this.$modal.msgSuccess("新建成功")
            }
          })
        }
      })
    }
  }
}
</script>